<template>
  <swiper class="banner" :options="swiperOption">
    <swiper-slide class="banner-item" v-for="(item,index) in bannerList" :key="index">
      <!--<router-link :to="getLink(item.linkObj)">-->
        <img class="img" :src="item.bannerUrl" v-show="item.bannerUrl">
      <!--</router-link>-->
    </swiper-slide>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  import {funMixin} from '../../config/mixin'
  export default {
    name: 'cereBanner',
    components: {
      Swiper,
      SwiperSlide
    },
    directives: {
      swiper: directive
    },
    mixins: [funMixin],
    props: {
      componentContent: {
        type: Object
      }
    },
    data () {
      return {
        swiperOption: {
          effect: 'fade',
          autoplay: false, // 可选选项，自动滑动
          loop: true,
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    computed: {
      bannerList: function () {
        console.log(this.componentContent)
        return this.componentContent.bannerData.filter(function (item) {
          return item.bannerUrl
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .banner {
    margin-left: 30px;
    margin-top: 10px;
  }

  .banner,
  .banner-item {
    width: 690px;
    height: 280px;
    border-radius: 25px;
    overflow: hidden;
  }

  .banner-item img {
    width: 690px;
    height: 280px;
  }
</style>
